<template>
	<div class="index">
		<Header></Header>
		<!-- 内容 -->
		<div class="w65 ma">
			<!-- 面包屑 -->
			<breadcrumb></breadcrumb>
		</div>
		<div class="conent-top">
			<div class="w65 ma p05 pt2">
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px" class="demo-ruleForm">
					<el-row>
						<el-col :span="8">
							<el-form-item label="表格" prop="image">
								<!-- 导入人员档案 -->
								<!--  action 放的是导入文件的后台地址 -->
								<el-upload
									ref="upload"
									name="file"
									:limit="limit"
									:auto-upload="false"
									action="接口地址"
									:on-exceed="handleExceed"
									:file-list="filelist"
									:on-change="handleChansge"
								>
									<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
									<el-button style="margin-left: 10px;" size="small" type="success" @click="postfile" :disabled="btn.disable">{{ btn.message }}</el-button>
									<div slot="tip" class="el-upload__tip">请上传为zip,rar格式的文件</div>
								</el-upload>
								<!-- 此处可以写导入时出现的详细错误信息，包含第几行出现问题显示出来 -->
								<div v-for="o in errmesg" :key="o.message" class="text item">{{ o.message }}</div>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="产品名称" prop="name">
								<el-input style="width: 16rem;" clearable placeholder="请输入产品名称" v-model="ruleForm.name"></el-input>
							</el-form-item>
							<el-form-item label="提交单位" prop="Submitted_by">
								<el-input style="width: 16rem;" clearable placeholder="请输入提交单位" v-model="ruleForm.Submitted_by"></el-input>
							</el-form-item>
							<el-form-item label="文件类型" prop="file_type">
								<el-input style="width: 16rem;" clearable placeholder="请输入文件类型" v-model="ruleForm.file_type"></el-input>
							</el-form-item>
						</el-col>
						<!-- <el-col :span="8">
							<el-form-item label="提交时间" prop="sub_time">
								<el-date-picker v-model="ruleForm.sub_time" clearable style="width: 16rem;" type="date" placeholder="请选择提交时间"></el-date-picker>
							</el-form-item>
						</el-col> -->
						<el-col :span="8">
							<el-form-item label="保管单位" prop="Safekeeping_unit">
								<el-input style="width: 16rem;" placeholder="请输入保管单位" v-model="ruleForm.Safekeeping_unit"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="项目名称" prop="entry_name">
								<el-input style="width: 16rem;" placeholder="请输入项目名称" v-model="ruleForm.entry_name"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="共享连接" prop="share_connection">
								<el-input style="width: 16rem;" clearable placeholder="请输入共享连接" v-model="ruleForm.share_connection"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="关键词" prop="key_word_k">
								<el-input style="width: 16rem;" clearable placeholder="请输入关键词" v-model="ruleForm.key_word_k"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="备注" prop="remark">
								<el-input clearable style="width: 16rem;" placeholder="请输入备注" v-model="ruleForm.remark"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="类型" prop="type">
								<el-select style="width: 16rem;" clearable v-model="ruleForm.type" placeholder="请选择类型">
									<el-option v-for="item in optionsDrillType" :key="item.drill_type" :label="item.label" :value="item.drill_type"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<!-- <el-col :span="8">
							<el-form-item label="分类" prop="stype">
								<el-select style="width: 16rem;" clearable v-model="ruleForm.stype" placeholder="请选择类型">
									<el-option v-for="item in stypeOptions" :key="item.id" :label="item.label" :value="item.id"></el-option>
								</el-select>
							</el-form-item>
						</el-col> -->
						<el-col :span="8">
							<el-form-item label="审批人" prop="s_id">
								<el-select style="width: 16rem;" clearable v-model="ruleForm.s_id" placeholder="请选择审批人">
									<el-option v-for="item in optionsName" :key="item.id" :label="item.username" :value="item.id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12" :offset="8">
							<el-form-item>
								<el-button class="btnSubmit" type="primary" :loading="loading" @click="submitForm('ruleForm')">
									<span v-if="!loading">提交审核</span>
									<span v-else>提交审核中...</span>
								</el-button>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
		</div>
		<!-- 底部 -->
		<Footer></Footer>
	</div>
</template>

<script>
import breadcrumb from '@/components/breadcrumb .vue';
import { getItem } from '@/utils/storage.js';
import { upload, approval, addGeosciences } from '@/api/drill.js';
export default {
	name: 'addDrill',
	components: {
		breadcrumb
	},
	data() {
		return {
			//文件
			file: '',
			filename: '',
			limit: 1,
			filelist: [],
			errmesg: [],
			btn: {
				disable: false,
				message: '上传服务器'
			},

			ruleForm: {
				image: null,
				token: getItem('token'),
				del_id: ''
			},
			optionsName: [], //审核人
			daterange: [],
			loading: false,
			rules: {
				s_id: [{ required: true, message: '请选择审核批人', trigger: 'change' }]
			},
			optionsDrillType: [
				{
					label: '城市地质',
					drill_type: 1
				},
				{
					label: '地热资源',
					drill_type: 2
				},
				{
					label: '区域海洋',
					drill_type: 3
				}
			],
			stypeOptions: [
				{
					label: '地学产品',
					id: 2
				},
				{
					label: '图鉴',
					id: 3
				}
			]
		};
	},
	created() {
		let data = {
			token: getItem('token')
		};
		approval(data).then(res => {
			console.log(res);
			this.optionsName = res.data;
		});
		if (this.$route.query.updateVal == '1') {
			console.log(this.$route.query.val);
			this.ruleForm = {
				name: this.$route.query.val.name,
				Submitted_by: this.$route.query.val.Submitted_by,
				file_type: this.$route.query.val.file_type,
				Safekeeping_unit: this.$route.query.val.Safekeeping_unit,
				entry_name: this.$route.query.val.entry_name,
				share_connection: this.$route.query.val.share_connection,
				key_word_k: this.$route.query.val.key_word_k,
				image: this.$route.query.val.image,
				remark: this.$route.query.val.remark,
				// type: parseInt(this.$route.query.val.type),
				s_id: '',
				token: getItem('token'),
				del_id: this.$route.query.val.id
			};
			let fileName = {
				name: this.$route.query.val.image
			};
			this.filelist.push(fileName);
		}
	},
	methods: {
		handleExceed(e) {
			// 判断是否只能上传一个文件，超过提示报错
			this.$notify.error({
				title: '错误',
				message: '只能上传一个文件哦'
			});
		},
		handleChansge(file) {
			if (!/\.(zip|rar)$/.test(file.name)) {
				this.$notify.error({
					title: '错误',
					message: '上传文件只能为zip,rar包'
				});
				this.filelist = [];
				this.file = '';
				return false;
			}
			console.log(file);
			this.file = file.raw;
			this.filename = file.name;
		},

		postfile() {
			let that = this;
			if (this.file == '') {
				that.$notify.error({
					title: '错误',
					message: '上传文件不能为空'
				});
				return false;
			} else {
				let formData = new FormData();
				formData.append('file', this.file);
				this.btn.disable = true;
				this.btn.message = '上传中，请等待';
				upload(formData).then(res => {
					this.btn.disable = false;
					this.btn.message = '上传服务器';
					this.msgSuccess(res.msg);
					this.ruleForm.image = res.data;
				});
			}
		},

		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.loading = true;
					console.log(this.ruleForm);
					addGeosciences(this.ruleForm).then(() => {
						this.loading = false;
						this.msgSuccess('提交成功,等待审核');
						this.ruleForm.del_id = '';
						this.filelist = [];
						this.$router.go(-1);
					});
				} else {
					return false;
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.conent-top {
	background-color: #ffffff;
	height: 39.5rem;
}
/deep/.el-form-item__label {
	text-align: right;
}
.btnSubmit {
	background-color: #2f6bbb;
	margin-top: 4rem;
}
</style>
